Skip to content

feat(dock): hide the floating dock while any dialog is open - #383

Open
adamecker wants to merge 2 commits into
jherforth:mainfrom
adamecker:feature/dock-hide-on-dialog
Open

adamecker wants to merge 2 commits into
jherforth:mainfrom
adamecker:feature/dock-hide-on-dialog

Conversation

@adamecker

Copy link
Copy Markdown
Contributor

What this changes

The floating dock stays visible while a dialog is open, and on small screens it can cover the dialog's action buttons.

  • A MutationObserver (dialogVisibility.js) counts open MUI modal roots and hides the dock while any dialog is open; the dock returns as soon as the last dialog closes.
  • Stacked dialogs work too: the dock stays hidden until every dialog is closed.
  • 5 new tests in dialogVisibility.test.js; app.jsx wires it up.

Two honest caveats: dialogs inside plugin frames live in their own documents, so a plugin-frame dialog won't hide the dock; and opening Admin on a desktop display now hides the dock too, since Admin is a dialog.

Testing

Tested end to end with demo data:

  • Phone (390×844): dialog open, no dock visible, Cancel and Add chore fully clear; Cancel brings the dock straight back.
  • Desktop: dialog open, no dock visible; stacked Admin + New Chore dialogs keep the dock hidden until both close.
  • Full client suite: 89 files, 969 tests pass; vite build passes.

Screenshots

Phone, dialog open, no dock visible:

Phone, dialog open, no dock visible

Phone, dock back after Cancel:

Phone, dock back after Cancel

Desktop, dialog open, no dock visible:

Desktop, dialog open, no dock visible

Desktop, stacked Admin + New Chore dialogs, no dock visible:

Desktop, stacked Admin and New Chore dialogs, no dock visible

Generated with Muse AI 🤖

The dock renders above MUI dialogs, so on a phone it covers the bottom
action buttons of a dialog opened from a widget. Watch the document for
open dialog roots with a MutationObserver and hide the dock until the
last one closes; stacked dialogs keep it hidden.
@jherforth jherforth added the enhancement New feature or request label Nov 6, 2026
@jherforth jherforth added this to the 2.0 milestone Nov 6, 2026
@jherforth

Copy link
Copy Markdown
Owner

@adamecker Thanks, this works well. It now conflicts with main in one line of client/src/app.jsx, the dock's hidden prop. #378 added a carry-drag exception there, so the dock stays visible while a widget is dragged toward it. Please merge main and keep both:

        hidden={!carry.dragging && (dockHidden || expandedWidgetSize === 'full' || dialogOpen)}

Checked with that resolution on top of current main: client tests (1069), check:i18n and the build pass. In Edge:

  • the dock hides while a dialog is open, including a dialog on top of Admin, and comes back when the last one closes;
  • a chore's menu doesn't hide it;
  • dragging a widget toward the dock still shows it, and dropping it on a dock tab still moves the widget;
  • on a phone the dialog's Cancel and Schedule are clear of the dock.

The body-wide observer made no calls in 30 seconds on an idle wall. Once main is merged in, this is ready to merge.

🤖 Generated with Claude Code

Resolve conflict in client/src/app.jsx dock hidden prop: keep both
the carry-drag exception from jherforth#378 and the dialog-open hide from
this PR, per jherforth's review on jherforth#383.
@adamecker

Copy link
Copy Markdown
Contributor Author

Merged main and resolved the conflict with exactly the line you suggested:

hidden={!carry.dragging && (dockHidden || expandedWidgetSize === 'full' || dialogOpen)}

Verified locally on the merged branch: client tests 99 files / 1069 passed, and the client build passes. Ready to merge when you are.

🤖 Generated with Claude Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

Status: Backlog

Development

Successfully merging this pull request may close these issues.

2 participants